<template>
  <div class="SalSob">
    <div class="head">
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="showDialog()"
      >添加工资账套</el-button>
      <el-button
        type="success"
        icon="el-icon-refresh"
        @click="initSalaries"
      ></el-button>
    </div>

    <div class="main">
      <el-table
        :data="salaries"
        border
      >
        <el-table-column
          type="selection"
          width="40px"
        ></el-table-column>

        <el-table-column
          label="账套名称"
          prop="name"
          width="120px"
        ></el-table-column>

        <el-table-column
          label="基本工资"
          prop="basicSalary"
          width="80px"
        ></el-table-column>

        <el-table-column
          label="交通补助"
          prop="trafficSalary"
          width="80px"
        ></el-table-column>

        <el-table-column
          label="午餐补助"
          prop="lunchSalary"
          width="80px"
        ></el-table-column>

        <el-table-column
          label="奖金"
          prop="bonus"
          width="80px"
        ></el-table-column>

        <el-table-column
          label="启用时间"
          prop="createDate"
          width="120px"
        ></el-table-column>

        <el-table-column
          label="养老金"
          width="130px"
          align="center"
        >
          <el-table-column
            label="比率"
            prop="pensionPer"
            width="80px"
          ></el-table-column>
          <el-table-column
            label="基数"
            prop="pensionBase"
            width="80px"
          ></el-table-column>
        </el-table-column>

        <el-table-column
          label="医疗保险"
          width="130px"
          align="center"
        >
          <el-table-column
            label="比率"
            prop="medicalPer"
            width="80px"
          ></el-table-column>
          <el-table-column
            label="基数"
            prop="medicalBase"
            width="80px"
          ></el-table-column>
        </el-table-column>

        <el-table-column
          label="公积金"
          width="130px"
          align="center"
        >
          <el-table-column
            label="比率"
            prop="accumulationFundPer"
            width="80px"
          ></el-table-column>
          <el-table-column
            label="基数"
            prop="accumulationFundBase"
            width="80px"
          ></el-table-column>
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
        >
          <template v-slot="scope">
            <el-button
              type="primary"
              @click="showDialog(scope.row)"
            >编辑</el-button>
            <el-button
              type="danger"
              @click="deleteSalary(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>

    <div class="dialogs">
      <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        width="40%"
        @close="closeDialog"
      >
        <div class="dialog-content">
          <el-steps
            :active="activeIndex"
            direction="vertical"
          >
            <el-step
              :title="salaryAttributeName"
              v-for="(salaryAttributeName,index) in salaryAttributeNames"
              :key="index"
            ></el-step>
          </el-steps>
          <el-form
            :model="salary"
            style="width:50%;margin:auto"
            :rules="rules"
          >
            <el-form-item
              :prop="salaryAttributes[i]"
              v-for="(salaryAttribute,i) in salaryAttributes"
              v-show="activeIndex == i"
              :key="i"
            >
              <el-input
                v-model="salary[salaryAttribute]"
                :placeholder="`请输入${salaryAttributeNames[i]}  按回车键或者点击空白处完成输入`"
                onkeypress="if(window.event.keyCode==13) this.blur()"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button
            type="success"
            @click="activeIndex = activeIndex - 1"
            :disabled="activeIndex <= 0"
          >上一步</el-button>
          <el-button
            type="success"
            @click="activeIndex = activeIndex + 1"
            :disabled="(activeIndex >= salaryAttributeNames.length) || !(salary[`${salaryAttributes[activeIndex]}`]) ||(nextButtonDisabled)"
            ref="next"
          >下一步</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="submitDialog"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>


<script>
import _ from 'lodash'
export default {

  name: 'SalSob',

  data() {

    var validatePer = (rule, value, callback) => {
      if (String(value).indexOf(".") + 1 <= 0) {
        this.$message.error('比率必须是小数')
        this.nextButtonDisabled = true
      } else {
        this.nextButtonDisabled = false
      }
    }

    var validateNumber = (rule, value, callback) => {
      if (isNaN(value) || String(value).trim() == '') {
        this.$message.error('请输入数字')
        this.nextButtonDisabled = true
      } else {
        this.nextButtonDisabled = false
      }
    }

    var validateName = (rule, value, callback) => {
      if (!value || String(value).trim() == '') {
        this.$message.error('用户名不能为空')
        this.nextButtonDisabled = true
      } else {
        this.activeIndex = this.activeIndex + 1
        this.nextButtonDisabled = false
      }
    }

    return {
      salary: {
        name: '',
        basicSalary: null,
        trafficSalary: null,
        lunchSalary: null,
        bonus: null,
        pensionPer: null,
        pensionBase: null,
        medicalPer: null,
        medicalBase: null,
        accumulationFundPer: null,
        accumulationFundBase: null,
      },
      salaryAttributes: [
        'name',
        'basicSalary',
        'trafficSalary',
        'lunchSalary',
        'bonus',
        'pensionPer',
        'pensionBase',
        'medicalPer',
        'medicalBase',
        'accumulationFundPer',
        'accumulationFundBase'
      ],
      salaries: [],
      dialogTitle: '',
      dialogVisible: false,
      salaryAttributeNames: [
        '账套名称',
        '基本工资',
        '交通补助',
        '午餐补助',
        '奖金',
        '养老金比率',
        '养老金基数',
        '医疗保险比率',
        '医疗保险基数',
        '公积金比率',
        '公积金基数'
      ],
      activeIndex: 0,
      rules: {
        pensionPer: [{ validator: validatePer, trigger: 'blur' }],
        medicalPer: [{ validator: validatePer, trigger: 'blur' }],
        accumulationFundPer: [{ validator: validatePer, trigger: 'blur' }],
        basicSalary: [{ validator: validateNumber, trigger: 'blur' }],
        trafficSalary: [{ validator: validateNumber, trigger: 'blur' }],
        lunchSalary: [{ validator: validateNumber, trigger: 'blur' }],
        pensionBase: [{ validator: validateNumber, trigger: 'blur' }],
        bonus: [{ validator: validateNumber, trigger: 'blur' }],
        medicalBase: [{ validator: validateNumber, trigger: 'blur' }],
        accumulationFundBase: [{ validator: validateNumber, trigger: 'blur' }],
        name: [{ validator: validateName, trigger: 'blur' }],
      },
      nextButtonDisabled: false
    }

  },

  methods: {
    //查询所有工资账套
    initSalaries() {
      this.getRequest(`salary/sob/`).then(resp => {
        if (resp) {
          this.salaries = resp
        }
      })
    },
    //关闭对话框触发方法
    closeDialog() {
      this.salary = {
        name: '',
        trafficSalary: null,
        basicSalary: null,
        lunchSalary: null,
        bonus: null,
        pensionPer: null,
        pensionBase: null,
        medicalPer: null,
        medicalBase: null,
        accumulationFundPer: null,
        accumulationFundBase: null,
      }
      this.activeIndex = 0
    },
    //显示对话框
    showDialog(row) {
      if (row != undefined) {
        Object.assign(this.salary, row)
        this.dialogTitle = '编辑工资账套'
      } else {
        this.dialogTitle = '添加工资账套'
      }
      this.dialogVisible = true
    },

    //提交对话框
    submitDialog() {
      if (this.salary.id) {
        this.updateSalary()
      } else {
        this.addSalary()
      }
    },
    //添加工资账套
    addSalary() {
      this.postRequest('salary/sob/', this.salary).then(resp => {
        if (resp) {
          this.initSalaries()
          this.dialogVisible = false
        }
      })
    },

    //更新工资账套
    updateSalary() {
      this.putRequest('salary/sob/', this.salary).then(resp => {
        if (resp) {
          this.initSalaries()
          this.dialogVisible = false
        }
      })
    },

    //删除工资账套
    deleteSalary(salary) {
      this.$confirm(`该操作将永久删除[${salary.name}],是否确认？`, '提示', { type: 'warning' }).then(() => {
        this.deleteRequest(`salary/sob/${salary.id}`).then(resp => {
          if (resp) {
            this.initSalaries()
          }
        })
      }).catch(() => {
        this.$message.info('已取消')
      })

    },
  },
  mounted() {
    this.initSalaries()
  },
}
</script>


<style scoped>
.head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.dialog-content {
  display: flex;
  justify-content: space-between;
}
</style>